import React from 'react'
import {useState,useEffect} from 'react'
import AntTable from '@/components/yxk/AntTable'
import AntDate from '@/components/yxk/AntDate'
import AntSelect from '@/components/yxk/AntSelect'
import RechargeSearch from '@/components/yxk/RechargeSearch'
import '@/assets/scss/yxk/rechargebox.scss'
import rechargeAllData from "../../http/yxk/Recharge";

export default function Recharge() {
  const rechargeStyle = {
    margin:"0 20px 0 0"
  };

  const [placeholderOne, setplaceholderOne] = useState('搜索充值单号')
  const [placeholderTwo, setplaceholderTwo] = useState('搜索用户手机')


  const [data,setData] = useState([])
  useEffect(() => {
    rechargeAllData()
      .then(res => {
        console.log(res[0].data.data.data);
        setData(res[0].data.data.data)
      })
      .catch ( err => {
        console.log(err);
      })
  },[])

  return (
        <div className="recharge-box">
          <div className="recharge-ant">
            <span style={ rechargeStyle}>
              <RechargeSearch placeholder={placeholderOne}></RechargeSearch>
            </span>
            <span style={ rechargeStyle}>
              <RechargeSearch  placeholder={placeholderTwo}></RechargeSearch>
            </span>
            <span style={ rechargeStyle}>
              <AntSelect></AntSelect>
            </span>
            <span style={ rechargeStyle}>
              <AntSelect></AntSelect>
            </span>
            <span style={ rechargeStyle}>
              <AntDate></AntDate>
            </span>


          </div>
          <div className="recharge-table">
            <AntTable data={data}></AntTable>
          </div>
        </div>
    )
}
